import createdName from '../../../../utils/createdName'
export default {
  name: createdName('Input'),
  props: {
    placeholder: {
      type: String,
      default: '',
      note: '输入框占位符',
    },
    value: {
      type: String,
      default: '',
      note: '输入值',
    },
    type: {
      type: String,
      default: 'text',
      note: '输入框类型',
    }
  },
  data () {
    return {
      txt: ''
    }
  },
  render (h) {
    let _self = this;
    let $slots = this.$slots
    _self.txt = _self.value

    return h('div', {
      class: {
        'form-input': true,
        'form-input-group': $slots.append || $slots.prefix || $slots.prepend || $slots.suffix,
        'form-input-group--append': $slots.append,
        'form-input-group--prefix': $slots.prefix,
        'form-input-group--prepend': $slots.prepend,
        'form-input-group--suffix': $slots.suffix,
      }
    }, [
      $slots.prefix,
      $slots.prepend,
      h('input', {
        class: 'form-input__inner',
        attrs: {
          placeholder: _self.placeholder,
          type: _self.type,
        },
        domProps: {
          value: _self.txt
        },
        on: {
          input (event) {
            _self.$emit('input', event.target.value)
          }
        }
      }),
      $slots.append && h('div', {
        class: 'form-input-group__append'
      }, [$slots.append]),
      $slots.suffix,
    ])
  }
}